<template>
  <div>
    <el-card class="box-card">
      <div slot="header">注册用户列表</div>
    

      <el-table
        :data="list"
        border
        style="width: 100%;">
        <el-table-column
          type="index"
          label="序号"
          width="50">
        </el-table-column>

        <el-table-column
          prop="username"
          align="center"
          label="用户名"
          width="200">
        </el-table-column>

        <el-table-column
          align="center"
          label="头像"
          width="200">
          <template slot-scope="scope">
            <el-avatar style="width:60px;height:60px;" :src="scope.row.icon" ></el-avatar>
            <!-- <img style="width:60px;height:60px;" :src="scope.row.icon" alt=""> -->
          </template> 
        </el-table-column>

        <el-table-column
          prop="nickname"
          align="center"
          label="昵称"
          width="180">
        </el-table-column>

        <el-table-column
          prop="realname"
          align="center"
          label="真实姓名"
          width="200">
        </el-table-column>

        <el-table-column
          prop="sex"
          align="center"
          label="性别"
          width="200">
        </el-table-column>

        <el-table-column
          prop="phone"
          align="center"
          label="电话"
          width="200">
        </el-table-column>

        <el-table-column
          prop="email"
          align="center"
          label="邮箱"
          width="200">
        </el-table-column>

        <el-table-column
          prop="birthday"
          align="center"
          label="生日"
          width="200">
        </el-table-column>

      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </el-card>


  </div>
</template>

<script>
import {findMembersByPage} from '@/api/register/registerUser';
import mixin from '@/mixins/index';
export default {
  mixins:[mixin],
  data(){
    return{
      //注册用户列表
      list:[],
    }
  },
  created(){
    this.getData()
  },
  methods:{
    //查询注册列表
    getData(){
      findMembersByPage(this.page.currentPage,this.page.size).then(res=>{
        console.log(res);
        this.list=res.data.rows
        this.page.total = res.data.total
      })
    },
    //每页条数
    handleSizeChange(val){
      this.page.size = val
      this.page.currentPage = 1
      this.getData()
    },
    //当前页数
    handleCurrentChange(val){
      this.page.currentPage = val
      this.getData()
    }
  }
}
</script>

<style lang="scss">
.el-card{
  margin: 20px;
}
</style>

<style lang="scss" scoped>

</style>